<template>
  <div class="app-container">
    <div class="filter-container">
  
      <el-input
        v-model="listQuery.real_name"
        placeholder="姓名"
        style="width: 130px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
      <el-input
        v-model="listQuery.mobile"
        placeholder="手机号码"
        style="width: 130px;"
        class="filter-item"
        @keyup.enter.native="handleFilter"
      />
     
      <el-select v-model="listQuery.city" placeholder="选择城市" filterable class="filter-item" style="width:130px;" @change="getRegionList">
        <el-option label="请选择城市"  value="" />
        <el-option
          v-for="item in city"
          :key="item.city"
          :label="item.name"
          :value="item.city"
        />
      </el-select>
      <el-select v-model="listQuery.merchant_type" placeholder="商户类型" filterable class="filter-item" style="width: 130px;">
        <el-option label="商户类型" value="" />
        <el-option value="1" label="医美"/>
        <el-option value="2" label="生美"/>
      </el-select>
      <!-- <el-select v-model="listQuery.order_status" placeholder="请选择状态" class="filter-item" style="width:130px;">
        <el-option label="选择状态" value="" />
        <el-option label="客户已提,销售未提" value="4" />
        <el-option label="信审中" value="5" />
        <el-option label="信审未通过" value="6" />
        <el-option label="信审已通过，待提交合同" value="7" />
      </el-select> -->
      <el-button v-waves class="filter-item" type="primary" icon="el-icon-search" @click="handleFilter">
        查询
      </el-button>

    </div>

    <el-table :key="tableKey" v-loading="listLoading" :data="list"  border fit highlight-current-row style="width: 100%;">
      <!-- <el-table-column label="ID" prop="id" align="center">
        <template slot-scope="{row}">
          <span>{{ row.order_id }}</span>
        </template>
      </el-table-column> -->
      <el-table-column label="订单号码" align="center" width="180">
        <template slot-scope="{row}">
          <span>{{ row.order_sn }}</span>
        </template>
      </el-table-column>
      <el-table-column label="客户姓名" align="center">
        <template slot-scope="{row}">
          <span>{{ row.real_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="手机号码" align="center">
        <template slot-scope="{row}">
          <span>{{ row.mobile }}</span>
        </template>
      </el-table-column>
      <el-table-column label="身份证号码" align="center" width="200">
        <template slot-scope="{row}">
          <span>{{ row.idcard }}</span>
        </template>
      </el-table-column>
      <el-table-column label="商户名称" align="center" width="300">
        <template slot-scope="{row}">
          <span>{{ row.merchant_name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="订单状态" align="center" width="200">
        <template slot-scope="{row}">
          <span>{{ row.order_status_name.str }}</span>
        </template>
      </el-table-column>

      <el-table-column label="销售人员" class-name="status-col">
        <template slot-scope="{row}">
          {{ row.sale_name }}
        </template>
      </el-table-column>
      <el-table-column label="订单归属" class-name="status-col">
        <template slot-scope="{row}">
          <em v-if="row.admin_id=='0'">暂无</em>
          <em v-if="row.admin_id>'0'">{{ row.admin_name }}</em>
        </template>

      </el-table-column>
      <el-table-column label="操作" align="center" width="230" class-name="small-padding fixed-width" >
        <template slot-scope="{row,$index}">
          <!-- <el-button v-if="row.order_status>1" type="primary" size="mini" @click="handleRecord(row.order_id)">
            订单记录
          </el-button> -->

          <el-button v-if="row.admin_id>'0'" size="mini" type="danger" @click="detail(row.order_id)">
            详情
          </el-button>
          <el-button v-if="row.admin_id=='0'&&admin.data_code!=1" size="mini" type="success" @click="accept(row.order_id)" >
            接单
          </el-button>
          <!-- <el-button v-if="nodes.indexOf('131')!=-1&&row.order_status<8" size="mini" type="primary" @click="editorder(row.order_id)">
            修改
          </el-button> -->
          <el-button size="mini" type="primary" @click="mediate(row.order_id,row.mediate)" >
            居间服务
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination v-show="total>0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
    <el-dialog title="居间服务费" :visible.sync="dialogFormVisible" width="560px">
      <el-form ref="dataForm" :rules="rules" :model="temp" label-position="left" label-width="120px" style="width: 70%; margin-left:70px;">
        <el-form-item label="已收居间服务费" prop="mediate">
          <el-input v-model="temp.paid_server" type="number" placeholder="请输入线下已收居间服务费" />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">
          取消
        </el-button>
        <el-button type="primary" @click="insertMediate()">
           确认
        </el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  fetchAllList,
  acceptOrder,
  getBackendLetterOrder,
  fetchOrderRecordListByOrderId
} from '@/api/order'
import {
  formatDate
} from '@/utils/formatDate.js'
import {
  getRegion,insertMediate,backendgetmerchantregion
} from '@/api/finance'
import waves from '@/directive/waves' // waves directive
import {
  parseTime,
  getNodes
} from '@/utils'
import Pagination from '@/components/Pagination' // secondary package based on el-pagination
export default {
  name: 'ComplexTable',
  components: {
    Pagination
  },
  directives: {
    waves
  },
  filters: {
    formatDate(time) {
      time = time * 1000
      const date = new Date(time)

      return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
    }
  },
  data() {
    return {
      admin:[],
      tableKey: 0,
      tableRecord: 1,
      list: null,
      record_list: null,
      listRecordLoading: true,
      recordTotal: 0,
      total: 0,
      listLoading: true,
      listQuery: {
        page: 1,
        limit: 10,
        real_name: '',
        mobile: '',
        idcard: '',
        order_status: [4,6],
        city: '',
      },
      city: [],
      nodes: [],
      temp: {
        order_id:'',
        paid_server:0,
      },
      rules: {
        real_name: [{
          required: true,
          message: '真实姓名必须填写',
          trigger: 'blur'
        }],
        mobile: [{
          required: true,
          message: '手机号码必须填写',
          trigger: 'blur'
        },
        {
          pattern: /^0{0,1}(13[0-9]|15[0-9]|153|156|18[0-9])[0-9]{8}$/,
          message: '手机号格式不对',
          trigger: 'blur'
        }
        ],
        idcard: [{
          required: true,
          message: '身份证号码必须填写',
          trigger: 'blur'
        }, {
          pattern: /(^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}$)/,
          message: '证件号码格式有误！',
          trigger: 'blur'
        }],
        merchant_id: [{
          required: true,
          message: '合作商户必须选择',
          trigger: 'blur'
        }],
        sale_id: [{
          required: true,
          message: '销售人员必须选择',
          trigger: 'blur'
        }]
      },
      merchant_list: [],
      sale_list: [],
      listRecordQuery: {
        page: 1,
        limit: 20,
        order_id: ''
      },
      textMap: {
        record: '订单记录',
        create: 'Create'
      },
      dialogFormVisible: false,
      dialogRecordVisible: false,
      dialogStatus: '',
      downloadLoading: false
    }
  },
  created() {
    this.cacheQueryFormat();
    this.getList();
    this.nodes = getNodes();
    this.getRegionList();
    //添加钩子，页面刷新
    window.addEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  mdestroyed() {
    //添加钩子，页面刷新
    window.removeEventListener('beforeunload', e => this.beforeunloadFn(e))
  },
  methods: {
    beforeunloadFn(e) {
      //刷新页面事件
      sessionStorage.removeItem('orderletter');
    },
    cacheQueryFormat(){
      let cacheQuery = sessionStorage.getItem('orderletter');
      if(cacheQuery){
        this.listQuery = JSON.parse(cacheQuery);
      }
    },
    getRegionList() {
      console.log(123)
        backendgetmerchantregion(this.listQuery).then(response => {
          if (this.listQuery.city) {
            this.quyu = response.data
          } else {
            this.city = response.data
          }
        })
      },
    getList() {
      sessionStorage.setItem('orderletter',JSON.stringify(this.listQuery))
      this.listLoading = true
      fetchAllList(this.listQuery).then(response => {
        this.list = response.data.data.data
        this.total = response.data.data.total
        this.admin = response.data.admin
        setTimeout(() => {
          this.listLoading = false
        }, 1.0 * 1000)
      })
    },
    handleFilter() {
      this.listQuery.page = 1
      this.getList()
    },
    accept(order_id) {
      acceptOrder(order_id).then(resp => {
        if(resp.code==200){
            this.$notify({
              title: '完成',
              message: '接单成功',
              type: 'success',
              duration: 2000,
              onClose: this.getList()
            })
        }
      })
    },
    getRecordList() {
      this.listRecordLoading = true
      fetchOrderRecordListByOrderId(this.listRecordQuery).then(response => {
        this.record_list = response.data.list
        this.recordTotal = response.data.count
        setTimeout(() => {
          this.listRecordLoading = false
        }, 1.0 * 1000)
      })
    },
    detail(order_id) {
      this.$router.push('/order/detail/' + order_id)
    },
    editorder(order_id) {
      this.$router.push('/order/editorder/' + order_id)
    },
    handleRecord(order_id) {
      console.log(order_id)
      this.dialogStatus = 'record'
      this.dialogRecordVisible = true
      this.listRecordQuery.order_id = order_id
      fetchOrderRecordListByOrderId(this.listRecordQuery).then(res => {
        this.record_list = res.data.list
        this.recordTotal = res.data.count
        setTimeout(() => {
          this.listRecordLoading = false
        }, 1.0 * 1000)
      })
    },
    mediate(order_id,mediate){
      this.dialogFormVisible=true;
      this.temp.paid_server = mediate;
      this.temp.order_id = order_id;
    },
    insertMediate() {
      this.$confirm(
        '录入居间服务费将会生成或者重置还款计划表，确定要执行该操作吗?',
        '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }
      ).then(() => {
        this.listLoading = true
        this.dialogFormVisible=false;
        insertMediate(this.temp).then(response => {
          this.listLoading = false
          if(response.code==200){
            this.$notify({  
              title: '提示',
              message: '操作成功',
              type: 'success',
              duration:2000
            });
            this.getList();
          }else{
              this.$notify({
              title: '提示',
              message: '网络错误',
              type: 'warning',
              duration:2000
            });
          }
        })
      })
    },

  }
}
</script>
<style>
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    white-space: nowrap;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
    float: left;
  }
</style>
